<template>
    <view class="order">
        <view class="head-box">
            <view class="my-search-bar-box">
                <uni-search-bar
                    v-model="searchValue"
                    :focus="false"
                    cancelButton="none"
                     class="my-search-bar-main"
                    @confirm="onSearch" 
                >
                </uni-search-bar>
                <view 
                    class="my-search-bar-text"
                    @click="onSearch"
                >
                    搜索
                </view>
            </view>
            <view class="head-money">
                <view class="iconfont icon-jifen icon-1"></view>
                <view>积分余额：{{ Number(integral).toFixed(2) }}</view>
                <view 
                    class="sign-in-text"
                    @click="onSignIn"
                >
                    签到
                </view>
            </view>
        </view>
        <view class="my-segmented-control-box">
            <uni-segmented-control
                :current="current" 
                :values="items" 
                styleType="text" 
                activeColor="#063d97"
                class="my-segmented-control"
                @clickItem="onClickItem"
            ></uni-segmented-control>
        </view>
        <swiper
            class="swiper" 
            circular 
            indicator-dots
            autoplay
        >
            <swiper-item>
                <image 
                    src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/banner/banner-7.png" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="swiper-img"
                ></image>
            </swiper-item>
            <swiper-item>
                <image 
                    src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/banner/banner-8.png" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="swiper-img"
                ></image>
            </swiper-item>
        </swiper>
        <!-- <view style="text-align: center; font-weight: bold; padding: 10rpx">- 积分商城 -</view> -->
        <uni-list :border="true">
            <uni-list-item
                v-for="(item, index) in checkList"
                :key="index"
                title=""
                rightText=""
                note=""
                thumb=""
                thumbSize="lg"
            >
                <template v-slot:header>
                </template>
                <template v-slot:body>
                    <view 
                        class="slot-box"
                        @click="goProductDetails(item)"
                    >
                        <image
                            :src="item.zsgm_ex6?.split(',')[0]" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="slot-img-1"
                        ></image>
                        <view class="slot-text-1">
                            <text class="slot-text-1-left">积分兑换</text>
                            <text class="slot-text-1-right">{{ item.zsgm_ex1 }}</text>
                        </view>
                        <view class="slot-text-2">
                            <view class="slot-text-2-money">￥{{ item.zsgm_ex2 }}</view>
                            <view class="slot-text-2-box">
                                <view class="slot-text-2-box-1">已售{{ item.zsgm_ex4 }}件</view>
                                <!-- <view class="slot-text-2-box-2">产地：{{ item.zsgm_ex4 }}件</view> -->
                            </view>
                        </view>
                        <view 
                            v-if="item.zsgm_ex12"
                            class="slot-text-3"
                        >
                            产地：{{ item.zsgm_ex12 }}
                        </view>
                    </view>
                </template>
            </uni-list-item>
        </uni-list>
        <uni-load-more :status="status"></uni-load-more>
        
        <uni-popup
            ref="popup1" 
            type="center"
            :is-mask-click="false"
        >
            <view class="my-popup-box">
                <view class="my-popup-box-text">恭喜</view>
              
               <view class="my-popup-box-content">
                   <view class="my-popup-box-content-text-1">{{ signInText }}</view>
                   <!-- <view class="my-popup-box-content-text-2">持续签到可兑换惊喜大礼</view> -->
              </view>
              <view style="display: flex; padding-top: 40rpx; box-sizing: border-box;">
                  <button
                       size="mini"
                       style="background: #2979ff; color: #fff; "
                       @click="closePopup1After"
                  >
                      确认
                  </button>
              </view>
            </view>
        </uni-popup>
        <myFixedShoppingCart />
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onPullDownRefresh, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
    import { markRaw, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { goodsMainListApi, goodsTypeListApi, wxUserInfoApi, signInApi } from '@/apis'
    import myFixedShoppingCart from '@/components/myFixedShoppingCart/myFixedShoppingCart.vue'
    const popup1: Ref<any> = ref(null)
    const checkList:Ref<any> = ref([
        // {
        //     zsgm_ex1: '12瓶装易捷水', //商品名称
        //     zsgm_ex2: 120, //售价积分
        //     zsgm_ex4: 62, //销售量
        //     zsgm_id: 100,
        //     zsgm_ex6: 'http://oss3.smartyoke.com/putaway/23e338cee2cb4428b7a29f45e4ff0268.jpg', //商品图片
        //     zsgm_ex3: 0, //库存数量
        //     zsgm_ex5: '商品简介', //商品简介
        //     zsgm_ex7: '商品类型名称', //商品类型名称
        //     zsgm_ex8: '已上架', //是否上架:未上架 ,已上架
        //     zsgm_ex9: '未审核', //审核状态:未审核 ,已审核
        //     zsgm_create_time: '', //创建时间
        //     zsgm_dj_ex3: 0, //冻结数量
        // },
        // {
        //     zsgm_ex1: '殴露纸巾',
        //     zsgm_ex2: 120,
        //     zsgm_ex4: 35,
        //     zsgm_id: 101,
        //     zsgm_ex6: 'http://oss3.smartyoke.com/putaway/74c3e8eca2c54a028f394eca9c213f40.jpg',
        // },
        // {
        //     zsgm_ex1: '大米2.5公斤',
        //     zsgm_ex2: 120,
        //     zsgm_ex4: 40,
        //     zsgm_id: 102,
        //     zsgm_ex6: 'http://oss3.smartyoke.com/putaway/66bb6ef59da949ec938d038783bff888.jpg',
        // },
        // {
        //     zsgm_ex1: '长柄雨伞',
        //     zsgm_ex2: 240,
        //     zsgm_ex4: 20,
        //     zsgm_id: 103,
        //     zsgm_ex6: 'http://smartyokecloud.oss-cn-beijing.aliyuncs.com/putaway/5a420d80738f4032a246e5ed7f235023.jpg',
        // },
    ])
    const status: Ref<string> = ref('loading') //more: 加载前 loading: 加载中 no-more: 没有更多数据
    const pageNo: Ref<number> = ref(1)
    const pageSize: Ref<number> = ref(10)
    
    const items: Ref<string[]> = ref([]) //'推荐', '保洁清洗', '育儿月嫂'
    const typeList: Ref<string[]> = ref([])
    
    const current: Ref<number> = ref(0)
    const searchValue: Ref<string> = ref('')
    const integral: Ref<number> = ref(0)
    const signInText: Ref<string> = ref('')
    
    const onClickItem = (e) => {
        if (current.value != e.currentIndex) {
            current.value = e.currentIndex;
            checkList.value = []
            status.value = 'loading'
            pageNo.value = 1
            goodsMainListApi({
                typeId: typeList.value[current.value].zsgc_id,
                key: searchValue.value, //商品关键字
                pageNo: pageNo.value, //第几页,默认从1开始
                pageSize: pageSize.value, //每页几条
            }).then((res: any) => {
               console.log(res.data)
               checkList.value = res.data
               
               // status.value = 'no-more'
               if (res.data.length == pageSize.value) {
                   status.value = 'more'
               } else {
                   status.value = 'no-more'
               }
            }).catch((e) => {
                status.value = 'no-more'
            }).finally(() => {
                // status.value = 'no-more'
            })
        }
    }
    onShow(async() => {
        status.value = 'loading'
        pageNo.value = 1
        try {
            let res1 = await goodsTypeListApi()
            typeList.value = res1.data
            items.value = res1.data.map((item: any) => item.zsgc_ex1)
            let res2 = await goodsMainListApi({
                typeId: typeList.value[current.value].zsgc_id,
                key: searchValue.value, //商品关键字
                pageNo: pageNo.value, //第几页,默认从1开始
                pageSize: pageSize.value, //每页几条
            })
            checkList.value = res2.data
            // status.value = 'no-more'
            if (res2.data.length == pageSize.value) {
                status.value = 'more'
            } else {
                status.value = 'no-more'
            }
        } catch(e) {
            status.value = 'no-more'
        } finally {
            // status.value = 'no-more'
        }
        
        wxUserInfoApi({}).then(res => {
            if (res.code == 200) {
                integral.value = res.data.zwu_jifen
            } else {
                uni.removeStorageSync('token');
                uni.removeStorageSync('storagePhone');
                let pages = getCurrentPages()
                let url = pages[pages.length - 1].route
                uni.reLaunch({
                    url: "/pages/login/login?url=/" + url
                })
            }
        })
        
    })

    // 下拉刷新重新加载数据
    onPullDownRefresh(() => {
        status.value = 'loading'
        pageNo.value = 1
        goodsMainListApi({
            typeId: typeList.value[current.value].zsgc_id,
            key: searchValue.value, //商品关键字
            pageNo: pageNo.value, //第几页,默认从1开始
            pageSize: pageSize.value, //每页几条
        }).then((res: any) => {
           console.log(res.data)
           checkList.value = res.data
           
           // status.value = 'no-more'
           if (res.data.length == pageSize.value) {
               status.value = 'more'
           } else {
               status.value = 'no-more'
           }
        }).catch((e) => {
            status.value = 'no-more'
        }).finally(() => {
            // status.value = 'no-more'
            uni.stopPullDownRefresh();
        })
    })

    // 上拉加载数据
    onReachBottom(() => {
       if (status.value = 'more') {
           status.value = 'loading'
           pageNo.value++
           goodsMainListApi({
                typeId: typeList.value[current.value].zsgc_id,
                key: searchValue.value, //商品关键字
                pageNo: pageNo.value, //第几页,默认从1开始
                pageSize: pageSize.value, //每页几条
           }).then((res: any) => {
                console.log(res.data)
                // res.data.unshift(...checkList.value)
                // checkList.value = res.data
                checkList.value.push(...res.data)
                if (res.data.length == pageSize.value) {
                    status.value = 'more'
                } else {
                    status.value = 'no-more'
                }
           }).catch((e) => {
                status.value = 'no-more'
            }).finally(() => {
                // status.value = 'no-more'
            })
       }
    })
    const goProductDetails = (val: any) => {
        uni.setStorageSync('productDetails', JSON.stringify(val))
        uni.navigateTo({
            url: '/pages/productDetails/productDetails'
        })
    }
    const onSearch = async(val: any) => {
       status.value = 'loading'
       pageNo.value = 1
       goodsMainListApi({
           typeId: typeList.value[current.value].zsgc_id,
           key: searchValue.value, //商品关键字
           pageNo: pageNo.value, //第几页,默认从1开始
           pageSize: pageSize.value, //每页几条
       }).then((res: any) => {
          console.log(res.data)
          checkList.value = res.data
          
          // status.value = 'no-more'
          if (res.data.length == pageSize.value) {
              status.value = 'more'
          } else {
              status.value = 'no-more'
          }
       }).catch((e) => {
           status.value = 'no-more'
       }).finally(() => {
           // status.value = 'no-more'
       })
    }
    const onSignIn = () => {
        // 调接口
        signInApi().then(res => {
            // signInText.value = '签到成功，获得8积分'
            // signInText.value = '今日已签到' 
            signInText.value = res.msg
            popup1.value.open()
        })
    }
    const closePopup1After = () => {
        popup1.value.close();
        wxUserInfoApi({}).then(res => {
            if (res.code == 200) {
                integral.value = res.data.zwu_jifen
            } else {
                uni.removeStorageSync('token');
                uni.removeStorageSync('storagePhone');
                let pages = getCurrentPages()
                let url = pages[pages.length - 1].route
                uni.reLaunch({
                    url: "/pages/login/login?url=/" + url
                })
            }
        })
    }
    onShareAppMessage((res) => {
        return {
            title: '救道转运',
            path: '/pages/index/index?invitationCode=' + uni.getStorageSync('myInvitationCode')
        }
    }),
    onShareTimeline(() => {
        return {
            // title: '救道转运', //当前小程序名称
            query: 'invitationCode=' + uni.getStorageSync('myInvitationCode')
        }
    })
    
    
    
</script>

<style lang="scss" scoped>
    .order {
        min-height: 100vh;
        background-color: #f2f2f2;
    }
    .my-segmented-control {
        width: 100%;
        // position: fixed; 
        // top: 0;
        // z-index: 100;
        // background-color: #f2f2f2;
        background-color: #fff;
    }
    .my-segmented-control-box {
        background-color: #fff;
        height: 80rpx;
    }
    .swiper {
        height: 260rpx;
        box-sizing: border-box;
        padding: 10rpx;
    }
    .swiper-img {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
    }
    
    /* list样式修改 */
    .slot-box {
        // margin-top: 10rpx;
        flex: 1;
    	display: flex;
    	flex-direction: column;
        background: rgb(255, 255, 255);
        box-sizing: border-box;
        border-radius: 24rpx;
        padding: 20rpx;
        .slot-img-1 {
            width: 100%;
            height: 300rpx;
            box-sizing: border-box;
            border-radius: 24rpx;
        }
        .slot-text-1 {
            // display: flex;
            // align-items: center;
            height: 100rpx;
            padding-top: 10rpx;
            overflow: hidden;
            .slot-text-1-left {                background: #f2403c;
                box-sizing: border-box;
                padding: 5rpx;
                border-radius: 10rpx;
                font-size: 24rpx;
                color: #fff;
            }
            .slot-text-1-right {
                box-sizing: border-box;
                padding-left: 20rpx;
                font-size: 28rpx;
                line-height: 48rpx;

            }
        }
        .slot-text-2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .slot-text-2-money {
                color: #f2403c;
                box-sizing: border-box;
                padding: 5rpx;
            }
            .slot-text-2-box {
                box-sizing: border-box;
                // padding-left: 20rpx;
                color: #b5b5b5;
                font-size: 20rpx;
                .slot-text-2-box-1 {
                    
                }
                .slot-text-2-box-2 {
                    
                }
            }
        }
        .slot-text-3 {
            box-sizing: border-box;
            color: #b5b5b5;
            font-size: 20rpx;
            text-align: right;
            height: 20rpx;
        }
    }
    
    
    :deep(.uni-list) {
        // margin-top: 10rpx;
        background-color: rgba(0, 0, 0, 0) !important;
        flex-direction: row;
        flex-wrap: wrap;
        .uni-list-item {
            background-color: rgba(0, 0, 0, 0) !important;
            width: 50vw;
            .uni-list-item__container {
                padding: 5rpx 5rpx !important;
            }
        }
    }
    // 列表标题title,note
    :deep(.uni-list-item__content-title) {
        font-size: 30rpx;
    }
    :deep(.uni-list-item__content-note) {
        font-size: 30rpx;
    }
    :deep(.uni-list--border:after) {
        background-color: rgba(0,0,0,0) !important;
    }
    
    .head-box {
        display: flex;
        align-items: center;
        padding: 10rpx;
        background: #fff;
        .my-search-bar-box {
            flex: 1;
            background-color: rgb(248, 248, 248);
            box-sizing: border-box;
            padding: 2rpx;
            border-radius: 40rpx;
            display: flex;
            align-items: center;
            .my-search-bar-main {
                flex: 1;
                box-sizing: border-box;
                padding: 2rpx;
                :deep(.uni-searchbar) {
                    padding: 0;
                }
                :deep(.uni-searchbar__cancel) {
                    padding-right: 20rpx;
                }
            }
            .my-search-bar-text {
                font-size: 28rpx;
                padding-right: 20rpx;
            }
        }
        
        .head-money {
            font-size: 28rpx;
            padding-left: 20rpx;
            display: flex;
            align-items: center;
            .icon-1 {
                color: rgb(217, 27, 2)
            }
            .sign-in-text {
                background: red;
                border-radius: 20rpx;
                color: #fff;
                padding: 5rpx 10rpx;
                font-weight: bold;
                margin: 0rpx 10rpx;
            }
        }
    }
    .my-popup-box {
        background: #fff; 
        width: 500rpx; 
        height: 600rpx; 
        box-sizing: border-box; 
        // padding: 0 0 30rpx 0; 
        padding: 20rpx;
        border-radius: 40rpx;
        background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/popup/sign-in.png);
        background-size:100% 100%; 
        color: #fff;
        .my-popup-box-text {
            text-align: center;
            padding-top: 20rpx;
            font-size: 36rpx;
        }
        .my-popup-box-content {
            text-align: center;
            box-sizing: border-box; 
            padding-top: 250rpx;
            .my-popup-box-content-text-1 {
                font-size: 40rpx;
                // padding-bottom: 20rpx;
            }
            .my-popup-box-content-text-2 {
                font-size: 30rpx;
            }
        }
    }
</style>
